<template>
  <div class="collectView">
    <breadcrumbNavigation
      v-if="props.title"
      :title="props.title"
      :showRightIcon="false"
    ></breadcrumbNavigation>
    <div class="collectViewBox">
      <!-- 收藏总数 -->
      <div class="collectSum">
        <div class="collectText">
          <span class="text">收藏总数</span>
          <CountTo
            class="count"
            :start="0"
            :end="195"
            prefix=""
            suffix=""
            :autoPlay="true"
            :duration="3000"
          />
        </div>
        <van-progress
          :show-pivot="false"
          color="#2196f3"
          stroke-width="10px"
          :percentage="97.5"
        />
      </div>
      <div class="collectType">
        <div class="collectItem" v-for="item in options">
          <div class="collectItemLeft">
            <i class="iconfont" :class="item.icon" :style="{'background-color': item.color}"></i>
            <span class="type" v-text="item.title"></span>
          </div>
          <CountTo
            class="count"
            :start="0"
            :end="item.value"
            prefix=""
            suffix=""
            :autoPlay="true"
            :duration="3000"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CountTo from "@/components/countTo/index.vue";

const props = defineProps({
  title: {
    type: String,
    default: "收藏类型",
  },
  start: {
    type: Number,
    default: 0,
  },
  end: {
    type: Number,
    default: 0
  }
});
const options = [
    { title: "文章", icon: "icon-wenzhang2", color: "#070807", value: 0 },
    { title: "片段", icon: "icon-ic_jian", color: "#070807", value: 192 },
    { title: "网页", icon: "icon-Web", color: "#3c76f7", value: 0 },
    { title: "速记", icon: "icon-lianxi2hebing_jilu", color: "#f97a02", value: 75 },
    { title: "图片", icon: "icon-fl-tupian", color: "#f855a4", value: 12 },
    { title: "音频", icon: "icon-yinpinpianduan", color: "#38c536", value: 192 },
    { title: "视频", icon: "icon-shipin", color: "#239722", value: 13 },
    { title: "文件", icon: "icon-wenjian", color: "#7950d5", value: 56 }
];
</script>

<style lang="less" scoped>
.collectView {
    width: 100%;
    height: 200px;
  .collectViewBox {
    position: relative;
    top: 4px;
    background-color: #fff;
    border-radius: 14px;
    padding: 5%;
    .collectSum {
      .collectText {
        display: flex;
        justify-content: space-between;
        .text,
        .count {
          font-weight: var(--primary-font-weight);
        }
      }
    }
    .collectType {
      position: relative;
      top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .collectItem {
        width: 46%;
        height: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .collectItemLeft {
            .iconfont{
                color: #fff;
                border-radius: 4px;
            }
          .type {
            position: relative;
            left: 6px;
          }
        }
      }
    }
  }
}
</style>
